import { defineComponent, watchEffect, ref } from 'vue'
import type { PropType } from 'vue'
import type { colsState } from '@/types/baseConfig'
import { NInput, NButton } from 'naive-ui'
import questionOption from '@/basic/addEdit/questionsOption'
export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<colsState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:modelValue', 'setting', 'desc'],
  setup(props, { emit }) {
    const info = ref<colsState>(questionOption.ColLayoutForm)
    watchEffect(() => {
      if (props.modelValue) {
        info.value = props.modelValue
      }
    })

    /**
     *  变化回调
     * */
    let timer: any = null
    const handOptions = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        emit('update:modelValue', info.value)
      }, 450)
    }
    return () => (
      <>
        <div class="flex items-center">
          <div class="settingItemTitle">
            <span>宽度</span>
            <span class="icon ml5 cursor-pointer" onClick={() => emit('desc', 'GridColWidth')}>
              <i class="esayIcon esayIcon-shuyi_shuoming"></i>
            </span>
          </div>
          <div class="ml-[10px] flex items-center">
            <NInput
              class="ml-[10px]"
              v-model:value={info.value.width}
              placeholder="请输入"
              clearable
              onBlur={handOptions}
            />
          </div>
        </div>
        <div class="mt-5 flex items-center">
          <div class="settingItemTitle">自定义样式</div>
          <div class="ml-[10px]">
            <NButton round size="small" onClick={() => emit('setting', 'ColLayoutForm.zdyStyle')}>
              去设置
            </NButton>
          </div>
        </div>
      </>
    )
  }
})
